<template>
	<view>
 <view class="swiperBox">
 <swiper class="faceimg" 
	:autoplay="false"
   interval="6000"
   duration="200" 
   :current="swiperCurr"
   @change="changeItem">  
  
  <swiper-item v-if="videourl">
  		<view class="videobox">
  		 <image v-if="!playing" class="image" style="width:100%; "
  			  :src="faceimages[0].thumb"   			 
  			mode="scaleToFill"   ></image>
			
		 <view v-if="!playing" @tap="playvideo" class="icon kb-icon-play"></view>
  		
		 <view v-if="playing"  class="video">
			 <!-- #ifdef MP-WEIXIN -->
			<video :src="videourl"
			autoplay loop muted controls="controls">  </video>
			 <!-- #endif -->
			 <!-- #ifdef H5 -->
			 <video :src="videourl"  autoplay loop muted controls="controls"> 
			  <source :src="videourl" type="video/mp4">
			  </video>
			 
			<!-- #endif -->
		 </view>
		</view>  
	
  		
  		
  </swiper-item>
  
  
      <swiper-item v-for="(item ,index) in faceimages"  :key="index" >
     
        <image class="image" style="width:100%; " 
		  :src="item.thumb" 
		mode="scaleToFill" 
		@click="previewImage(index)"
		 ></image>
       
      </swiper-item>
	  <!-- 户型图 -->
 <swiper-item v-for="(item ,index) in hximgs"  :key="index" >
      
   <image class="image" style="width:100%; " 
 		  :src="item.thumb" 
		  @click="previewHxtu(index)"
 		mode="scaleToFill" 
 		 ></image>
  
 </swiper-item>
 
	  
    </swiper>
  <!--图标-->
  <view class="panel" v-if="taglist.length">
    <view class="dleft">
		
		<up-subsection :list="taglist"
		:customStyle="{ height:'24px',opacity:0.7 ,width:(taglist?.length *60)+'px'}"
		mode="button" bgColor="#C4C2C0" activeColor="#333"
		:current="curNow" @change="sectionChange">
		</up-subsection>
	  
    </view>

    <view class="dright">
        <view class="slidetype ">
        <text class="bds"></text>
        <text class="txt">{{current}}/{{typeTotal}}</text>
      </view>
    </view>
	
  </view>

</view>
		<!-- 展示图片 视频的swiper -->
	</view>
</template>

<script>
 
	export default {
		name:"kb-group-swipe",
		props:{
		 faceimages: {
		      type: Array,
		      value: []
		    },
		    videourl: {
		      type: String, value: ""
		    },
		    hximgs: {
		      type: Array, value: []
		    },
		    isshow:{
		      type:Number, value: 1
		    }
	
		},
		data() {
			return {
				current: 1,
				state: "hidden",
				videohiden: true,
				showdots: false,
				playing: false, 
				curNow: 0,
				swiperCurr:0,
			};
		},
		computed:{
			slides(){
				
				return this.faceimages
			 
			},
			taglist(){
				var data = [];
				if(this.videourl){
					data.push({name:'视频', type:'video'})
				}
				if( this.faceimages?.length)
				{
					data.push({name:'图片', type:'images'})
				}
				if(this.hximgs?.length){
					data.push({name:'户型图', type:'hxtu'})
				}
				 
				return data;
				 
			},
			typeTotal(){
				var type = this.taglist[this.curNow ].type;
				if(type == 'video'){
					return 1
				}
				if(type == 'images'){ //图片
					return this.faceimages.length
				}
				if(type == 'hxtu')				
					return  this.hximgs.length
				return 1;
			},
			 
		},
		methods:{
			//滑动swiper-item 到第几个
			changeItem(e){
				var nowType = this.taglist[this.curNow];
				var swiperIndex = e.detail.current
				this.swiperCurr = swiperIndex;
			 
				// 常规计算
				if(swiperIndex ==0){
					 this.curNow = 0;
					 this.current = 1;
				}
				else if( swiperIndex > 0 && this.faceimages?.length && swiperIndex < this.faceimages.length){
					this.curNow = this.taglist[0].type=='video' ? 1 :0;
					this.current = this.taglist[0].type=='video' ? swiperIndex : swiperIndex+1; 
					this.playing = false;
				} else { //户型图显示
					this.curNow = this.taglist.length -1 ;
					this.current = swiperIndex - (this.faceimages?.length || 0) +1
				}
				 
			},
			playvideo(){
				this.playing = true
			} ,
			//视频图片户型图切换到第几个
			sectionChange(i){
				 
				if(this.taglist[i].type == 'video')
					this.swiperCurr = 0
				else if(this.taglist[i].type == 'images')
					this.swiperCurr =  this.videourl ? 1 : 0;
				else if(this.taglist[i].type == 'hxtu')
					this.swiperCurr = this.faceimages.length ;
				else 
					this.swiperCurr = 0;
			},
			previewImage(index){
				var imgs = [];
				this.faceimages.forEach(  obj=>{
					imgs.push(obj.thumb);
				});
				uni.previewImage({
					current: index,
					urls: imgs
				}) 
			},
			previewHxtu(index){
				var imgs = [];
				this.hximgs.forEach(  obj=>{
					imgs.push(obj.thumb);
				});
				uni.previewImage({
					current: index,
					urls: imgs
				}) 
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.swiperBox{
  position: relative;
  background-color: #fff;
}

.faceimg{
  height: 300px;
  text-align: center;
}
.faceimg .image{
   height: 300px;
}
.videobox{
	position: relative;
	background: #000;
	height: 300px;
	 
	.icon{ 
		position: absolute;
		left: 50%;
		top: 30%;
		margin-left: -40px; 
	}
}

.video{
	height: 250px;
	width: 100%;
	background: #000000 !important;
	 
}

.panel{
  position: absolute;
  left: 0px;
  bottom: 40rpx;
  display: flex;  
  justify-content: space-between;
  vertical-align: middle;
  width: 100%;
  height: 60rpx;
  z-index: 2;
}
.dleft{
  padding-left: 40rpx;
  
}
.dright{
  padding-right: 40rpx; 
   
}
.slidetype{  
   position: relative;
   width: 50px;
}
 .slidetype .bds, .slidetype .txt{
   width: 100%;
   display: block;
   height: 40rpx;
   left: 0; top: 0;
   padding: 2rpx 10rpx;
   border-radius: 40px;   
   color: #fff;
   font-size: 24rpx;
   position: absolute;
   text-align: center;
   line-height: 40rpx;
}
.bds {
background-color: #222;  
opacity: .5; 
}
 
  .active .txt{
    color: #222;
  }
 
 
</style>